<template>
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="登录日志">
        <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
          <template #statusSlot="{ model, field }">
            <n-input v-model:value="model[field]" />
          </template>
        </BasicForm>
      </n-card>
    </div>
    <n-card :bordered="false" class="mt-4 proCard">
      <BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="actionRef"
        @update:checked-row-keys="onCheckedRow" :bordered="false">
        <template #action>
          <TableAction />
        </template>
      </BasicTable>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
import { columns } from './columns';
import { BasicTable, TableAction } from '@/components/Table';
import { logPage } from '@/api/system/systemLog';
const actionRef = ref();

/**
 * 表格查询参数定义
 */
 const schemas: FormSchema[] = [
  {
    field: 'userName',
    component: 'NInput',
    label: '登录账号',
    componentProps: {
      placeholder: '请输入登录账号',
    },
  },
  {
    field: 'loginStatus',
    component: 'NSelect',
    label: '登录状态',
    componentProps: {
      placeholder: '请选择登录状态',
      options: [
        {
          label: '成功',
          value: '成功',
        },
        {
          label: '失败',
          value: '失败',
        },
      ],
    },
  },
];
const [register, { getFieldsValue }] = useForm({
  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
  labelWidth: 80,
  schemas,
});
const loadDataTable = async (res: any) => {
  return await logPage({ ...getFieldsValue(), ...res });
};

function onCheckedRow(rowKeys: any[]) {
  console.log(rowKeys);
}

function reloadTable() {
  actionRef.value.reload();
}
/**
 * 查询
 */
 function handleSubmit() {
  reloadTable();
}
/**
 * 重置查询
 */
 function handleReset() {
  reloadTable();
}
</script>

<style lang="less" scoped></style>
